<template>
  <div class="get-mobile" v-if="showDialog">
    <div class="wrapper">
      <div class="shade"></div>
      <div class="get-mobile-content">
        <div class="wx-info-tips">
          <span class="img"><img :src="avatar" alt=""></span>
          <span class="title">我们申请使用</span>
        </div>
        <div class="wx-info-mobile">你的手机号码</div>
        <div class="wx-info-btn">
          <wx-button class="button" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
            <img class="img" src="https://img.wifenxiao.com/h5-wfx/images/user/tel-number1.png" alt="">
            <span class="text">手机号快捷登录</span>
          </wx-button>
        </div>
        <div class="wx-info-desc">
          <div class="text">获取您的手机号仅用于您登陆商城</div>
          <div class="text">我们将对您的消息严格保密绝不外泄</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { getPhoneNumber } from '@/api/item/item'

import Store from '@/utils/store'
export default Vue.extend({
  props: {
    source: {
      type: String,
      default: ''
    },
    bindPhone: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      showDialog: false
    }
  },
  created() {
    // console.log('1111', this.bindPhone)
    this.showDialog = this.bindPhone
  },
  watch: {
    'bindPhone'(val) {
      // console.log('2222', val)
      this.showDialog = val
    },
  },
  methods: {
    getPhoneNumber(e) {
      var that = this
      // console.log('eeee', e, e.detail.code)
      // this.showDialog = false
      this.$emit('close')
      if (e.detail.code) {
        this.$loadingWrap.show()
        getPhoneNumber({code: e.detail.code}).then(res => {
          // console.log(res, '解码的手机号')
          this.$loadingWrap.close()
          if (res.status == 1) {
            this.$Error("绑定成功")
            this.$JumpName(this, 'buy')
          } else {
            that.$Error(res.msg)
          }
        })
      } else {
        if (e.detail.iv) {
          that.$Error('微信版本太低，请更新微信至最新版本')
        } else if (e.detail.errMsg == 'getPhoneNumber:fail user deny') {
          that.$Error('已拒绝获取手机号')
          setTimeout(()=>{
            this.$JumpName(this, 'buy')
          },200)
        } else if ( e.detail.errno == 104) {
        } else {
          that.$Error(e.detail.errMsg)
        }
      }
    }
  }
})
</script>

<style lang='scss'>
  .get-mobile{
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 11111;
    left: 0;
    top: 0;
    .shade{
      position: absolute;
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,.3);
      left: 0;
      top: 0;
      z-index: 1;
    }
    .wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
      position: relative;
      .get-mobile-content{
        z-index: 11;
        width: 600px;
        color: #333;
        background: #fff;
        padding: 40px;
        border-radius: 20px;
        position: relative;
        .wx-info-tips{
          .img{
            display: inline-block;
            width: 64px;
            // height: 64px;
            margin-right: 10px;
            vertical-align: top;
            img{
              width: 100%;
              height: 100%;
            }
          }
          .title{
            color: #333;
            line-height: 64px;
            font-size: 28px;
          }
        }
        .wx-info-mobile{
          color: #333;
          font-size: 28px;
          margin: 26px 0 40px;
        }
        .wx-info-btn{
          width: 100%;
          border-radius: 40px;
          text-align: center;
          margin-bottom: 40px;
          .button{
            background: #50C159;
            display: flex;
            justify-content: center;
            padding: 20px 0;
          }
          .text{
            display: inline-block;
            color: #fff;
            font-size: 24px;
            line-height: 40px;
            margin-right: 16px;
          }
          .img{
            display: inline-block;
            width: 40px;
            height: 40px;
            display: inline-block;
            vertical-align: top;
            margin-right: 16px;
          }
        }
        .wx-info-desc{
          color: #999;
          font-size: 24px;
          line-height: 34px;
          .text{
            margin-bottom: 10px;
          }
        }
      }
    }
  }
</style>
